<template>
  <div>
    <div class="risk-hea">
      <p>
        <span>模型一 : 企业非法集资风险预警模型</span>
      </p>
      <div class="algo-mb">
        <label>烽火指数预警分值 :</label>
        <div class="algo-mb-right">
          <p class="numStyle">
            <el-input-number v-model="num8" controls-position="right" :min="0" :max="100"></el-input-number>
          </p>
          <!--<input type="number" value="60" max="100" min="0" maxlength="3" @input="keyDown()">-->
        </div>
        <span class="prompt">注意：请填入0-100数值</span>
      </div>
      <div class="risk-xinxi">
        <ul>
          <li v-for="(item,index) in topTabData" :key="item.id" @click="tabSetting(item.itemName,index)" :class="{'active':index ==checkindex}">{{item.name}}</li>
        </ul>
      </div>
    </div>
    <div class="risk-box">
      <component :is="setView" ref="dataList" :datas="apiData" :names="names">
      </component>
      <div class="footer">
        <!-- <button @click="edit">编辑/保存</button> -->
         <!-- <button @click="postData">编辑</button> -->
         <button @click="postData">保存</button>
      </div>
    </div>
  </div>
</template>
<script>
  import {publicSentimentRisk, businessRisk, complaintsReportRisk, complianceRisk, returnMigrationRisk, spreadRisk, associatedRisk} from './earlySettingTab'
  import { sysManage as api } from '../../api'
  import Axios from 'axios'
  export default {
    data() {
      return {
        setView: publicSentimentRisk,
        checkindex: 2,
        token: '',
        curConfig: {},
        topTabData: [
          // {
          //   itemName: 'publicSentimentRisk',
          //   name: '合规风险',
          //   path: ''
          // },
          {
            itemName: 'publicSentimentRisk',
            name: '经营风险',
            path: ''
          },
          {
            itemName: 'publicSentimentRisk',
            name: '舆情风险',
            path: ''
          },
          {
            itemName: 'publicSentimentRisk',
            name: '关联风险',
            path: ''
          },
          // {
          //   itemName: 'publicSentimentRisk',
          //   name: '收益率风险',
          //   path: ''
          // },
          {
            itemName: 'publicSentimentRisk',
            name: '传播风险',
            path: ''
          }
        ],
        num8: 60,
        apiData: [],
        names: ''
      }
    },
    methods: {
      postData() {
        let dataJsons = JSON.stringify(this.$refs.dataList.options)
        let scores = this.num8
        let riskNames = this.topTabData[this.checkindex].name
        let params = {riskName: riskNames, score: scores, dataJson: dataJsons}
        api.postUpdateModel1(params).then(res => {
          this.tips(res.msg, 'success')
        }).catch(res => {
          this.tips(res.msg, 'error')
        })
      },
      tabSetting(tab, index) {
        this.setView = tab
        this.checkindex = index
        this.initData()
      },
      getScore() {
        // api.postGetModel1Score().then(res => {
        //   this.num8 = res.data
        // }).catch(res => {
        //   this.tips(res.msg, 'error')
        // })
        Axios.post(
          window.api_host + '/model/getModel1Score',
          this.curConfig
        ).then(rtn => {
          this.num8 = rtn.data
        }).catch(err => {
          this.tips(err.msg, 'error')
        })
      },
      initData() {
        let name = this.topTabData[this.checkindex].name
        let params = {'riskName': name}
        this.names = name
        console.log(params)
        api.postGetMode(params).then(res => {
          console.log(res)
          this.apiData = res.data
        }).catch(res => {
          this.tips(res.msg, 'error')
        })
      }
      // edit() {
      //   this.$router.push('/sysManage/earlyWarningAlgorithm')
      // }
    },
    mounted() {
      this.token = JSON.parse(sessionStorage.getItem('user')).token
      this.curConfig = {
        timeout: 600000,
        headers: {
          Authorization: this.token
        }
      }
      this.initData()
      this.getScore()
    },
    components: {
      publicSentimentRisk,
      businessRisk,
      complaintsReportRisk,
      complianceRisk,
      returnMigrationRisk,
      spreadRisk,
      associatedRisk
    }
  }
</script>
<style lang="scss" scoped>
  .risk-hea{
    width: 100%;
    &>p{
      width: 100%;
      height: 55px;
      line-height: 55px;
      font-size: 16px;
      color: #555555;
      font-weight:bold;
    }
    .risk-xinxi {
      width: 100%;
      height: 58px;
      background-color: #ffffff;
      box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.05);
      border-radius: 5px;
      ul{
        display: flex;
        justify-content: center;
        li{
          cursor: pointer;
          width: 145px;
          height: 54px;
          line-height: 58px;
          font-size: 16px;
          color: #666666;
          text-align: center;
        }
        .active{
          background-color: #f2f6fb;
          color: #1a75ca;
          border-bottom: 5px solid #1a75ca;
        }
      }
    }
  }
  .risk-box{
    width: 100%;
    margin-top:20px;
    min-height: 685px;
    /*height: 1169px;*/
    background-color: #ffffff;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.05);
    border-radius: 5px;
    padding: 40px 40px 0 40px;
    box-sizing: border-box;
  }
  .algo-mb {
  width: 100%;
  & > label {
    display: inline-block;
    width: 125px;
    height: 38px;
    line-height: 38px;
    color: #999999;
  }
  .algo-mb-right {
    display: inline-block;
    margin:0 0 30px 5px;
    ul {
      width: 100%;
      display: flex;
      li {
        padding: 0 12px;
        height: 22px;
        line-height: 22px;
        background-color: #e2f1ff;
        border-radius: 3px;
        margin-right: 30px;
        span {
          color: #75bfff;
        }
      }
    }
    input {
      width: 96px;
      height: 26px;
      padding-left: 10px;
      box-sizing: border-box;
      background-color: #ffffff;
      border-radius: 5px;
      border: solid 1px #d9d9d9;
      outline: none;
    }
  }
  .prompt {
    color: #999999;
    margin-left: 10px;
  }
}
  .footer{
    width: 100%;
    // position: relative;
    text-align: center;
    height: 100px;
    button{
      width: 142px;
      height: 34px;
      background-image: linear-gradient(-23deg,#2f81ee 0%,#3f8ffa 100%),
      linear-gradient(#ecf2fb,#ecf2fb);
      border-radius: 5px;
      color: white;
      font-size: 14px;
      // position: absolute;
      margin-top: 25px;
      cursor: pointer;
      &:hover{
        opacity: 0.95;
      }
    }
  }
</style>



// WEBPACK FOOTER //
// src/view/sysManage/earlyWarningSetting.vue
